<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="__TMPL__/public/assets/js/flexible.js" ></script>
		<link rel="stylesheet" href="__TMPL__/public/assets/css/all_page.css" />
		<link rel="stylesheet" href="__TMPL__/public/assets/css/public.css" />
		<link rel="stylesheet" href="__TMPL__/public/assets/css/mobiscroll.css" />
		<link rel="stylesheet" href="__TMPL__/public/assets/css/mobiscroll_002.css" />
		<link rel="stylesheet" href="__TMPL__/public/assets/css/mobiscroll_003.css" />
		<style>
			
		</style>
	</head>
	<body>
		
		<div class="leave repairs">
			<!--头部-->
			<div class="top" style="background: url({:cmf_get_image_url($img['img'])}) no-repeat;background-size: 100% 100%;">
				<p>留言诉求</p>
			</div>
			
			<div class="pInfo">
				<div class="Cn">
					<div class="l">
					 	<span class="bxlx"></span><label>留言诉求类型：</label>
					 	<div class="sel">
					 		<input type="text" id="faType"  onfocus="this.blur()"/>
					 		<span id="faTypeText" value='0'>请选择</span>
					 	</div>
					 	<ul id="faType-list" style="display: none">
					 		<volist name='sort' id='v'>
							<li value="{$v['id']}">{$v['name']}</li>
							</volist>
						</ul>
					</div>
					<div class="l">
					 	<span class="xgbm"></span><label>相关部门：</label>
					 	<input type="text" readonly="readonly" placeholder="后勤部" value="{$user['name']}" />
					</div>
					<div class="time div_float">
						<div class="m">
							<span class="lxrt"></span><label>联系人：</label>
							<input type="text" readonly="readonly" placeholder="苏生" value="{$user['user_login']}" />
						</div>
						<div class="m lx">
							<span class="lxdh"></span><label>电话：</label>
							<input class="lxInput" readonly="readonly" type="number" value="{$user['mobile']}" />
						</div>
					</div>
					<div class="l remark gznrText">
					 	<span class="gznr"></span><label>具体内容：</label>
					 	<textarea name="content"></textarea>
					</div>
					<div class="l">
					 	<span class="gztp"></span><label>相关图片：</label>
					 	<div class="takePto">
					 		<p>拍照上传</p><span></span>
					 	</div>
					 	<input type="file" accept="image/*" class="photoInput divHide" />
					</div>
					<div class="photo div_float">
						<!-- <div class="tpList">
							<img src="__TMPL__/public/assets/images/p2.png" />
							<span onclick="delPhoto($(this))">×</span>
						</div> -->
				 	</div>
					<div>
						<button class="pSubmit" onclick="sub()">立即提交</button>
					</div>
				</div>
			</div>
			
			
			<!--公共底部-->
			<include file='public@footer'/>
			
		</div>
		
	
	<script type="text/javascript" src="__TMPL__/public/assets/js/jquery-1.8.3.js" ></script>
	<script type="text/javascript" src="__TMPL__/public/assets/js/js.js" ></script>
	<script type="text/javascript" src="__TMPL__/public/assets/js/mobiscroll.custom-2.5.2.min.js" ></script>
	<script type="text/javascript" src="__TMPL__/public/assets/js/mobiscroll_003.js" ></script>
	<script type="text/javascript" src="__TMPL__/public/assets/js/lrz.all.bundle.js" ></script>
	<script>
		var imgs = [];
		$(function(){

			
			
			$("#faType").click(function() {
				var that = this;
				$("#faType-list").mobiscroll().treelist({
					theme: "android-ics",
					lang: "zh",
					display: 'bottom',
					headerText: '请您选择',
					onSelect: function(valueText) {
						var m = $(this).find("li").eq(valueText).html();
						$(that).val(m);
						$('#faTypeText').html(m);
						var value = $(this).find("li").eq(valueText).attr('value');
						$('#faTypeText').attr('value', value);

					}
				});
				$("input[id^=faType-list]").focus();
			});
			
			$('.takePto').on('click',function(){
				var numLen = $('.photo>div').length;
				if(numLen < 3){
					$('.photoInput').click();
				}else{
					alert('最多上传3张凭证！')
				}
			});
			
			$('.photoInput').change(function() {
				if($(this)[0].files[0].size>10485760){
					alert('请上传100*100像素 或者大小小于10M的图片')
				}else{
					lrz(this.files[0], {
						width: 1024
					})
					.then(function(rst) {
						// 把处理的好的图片给用户看看呗（可选）
						var img = new Image();
						img.src = rst.base64; //base64字符串
						
			            renderPhoto(rst.base64);
						
					});
				}
			});
		})
		
		
		//渲染图片 para:最新选择图片的base64
		function renderPhoto(para){
			var newImg = para;
			var oldImg = [];
			if(newImg != "null" || typeof(newImg) == 'object'){
				
				if(typeof(newImg) == 'object'){
					$.each(newImg, function(index,item) {
						console.log()
						oldImg.push($(this)[0]);
					});
				}else{
					oldImg.push(newImg);
					$.each($('.photo>div'), function(index,item) {
						oldImg.push($(this).find('img').attr('src'));
					});
				}
			}
			
			
			
			$('.photo').empty();
			
			if(oldImg.length>0){
				$.each(oldImg,function(index,item){
					var temp = '<div class="tpList">';
					temp += '<img src="'+item+'" /><span onclick="delPhoto($(this))" value="'+index+'">×</span>';
					temp += '</div>';
					$('.photo').append(temp);
				})
			}
			
			imgs = oldImg;
			console.log(imgs)
		}
		
		//删除图片
		function delPhoto(para){
			var cIndex = parseInt(para.index())-1;
			var oldImg = [];
			var newImg = [];
			
			$.each($('.photo>div'), function(index,item) {
				oldImg.push($(this).find('img').attr('src'));
			});
			
			$.each(oldImg,function(index,item){
				if(cIndex != index){
					newImg.push(item)
				}
			})
			
			para.parent().remove();
			
			
			if(newImg.length>0){
				renderPhoto(newImg);
			}else{
				renderPhoto('null');
			}

			imgs = newImg;
			console.log(imgs)
		}
		console.log(imgs)
		function sub() {
			var img = imgs;
			var content = $("textarea[name='content']").val();
			var type = $('#faTypeText').attr('value');
			if ( type == 0 ) {
				alert('请选择留言诉求类型');return false;
			}
			if ( !content ) {
				alert('请输入具体内容');return false;
			}
			$.ajax({
				url:"{:url('addPost')}",
				type:'post',
				dataType:'json',
				data:{
					img:img,
					type:type,
					content:content,
				},
				success:function(data) {
					if (data.status == 0) {
		    			alert(data.msg);
		    		}else{
		    			alert(data.msg);
		    			window.location.href=data.url;
		    		}
				},
				error:function() {
					alert('网络异常');
				}
			});

		}
		
	</script>
	</body>
</html>
